<template>
    <div class="role-management-container">
        <div class="role-management-left">
            <div class="role-management-title">
                角色列表
            </div>
            <el-table :data="roleList" stripe style="width: 100%">
                <el-table-column prop="roleName" label="角色名" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" @click="checkRoleMenu(scope.row)">查看角色菜单</el-button>
                        <el-button type="danger" @click="deleteThisRole(scope.row)" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="role-management-title" style="margin-top: 20px;">
                新增角色
            </div>
            <el-form :model="roleForm" :rules="rules" ref="roleForm" label-width="100px" class="demo-ruleForm"
                style="width: 80%; margin: 0 auto;">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="roleForm.roleName"></el-input>
                </el-form-item>
                <div style="position: relative;right: 0;text-align: right;margin-top: 5%;">
                    <el-button @click="submitAddRole('roleForm')" type="primary">确认提交</el-button>
                </div>
            </el-form>
        </div>
        <div class="role-management-right">
            <div class="role-management-menu-list" v-show="showRoleMenu">
                <div class="role-management-menu-list-title">
                    <div style="width: 100%;">{{ roleSelect }}-菜单树</div>
                </div>
                <div style="display: flex; width: 100%; font-weight: 700; margin-bottom: 15px;">
                    <div style="width: 35%; text-align: center;">
                        菜单编号
                    </div>
                    <div style="width: 45%; text-align: left;">菜单名称（备注）</div>
                    <div style="text-align: left;">操作</div>
                </div>
                <div style="height: 360px; overflow: auto; ">
                    <template v-for="item in roleMenuList">
                        <div v-if="item.fatherBusinessId == 0" :key="item.businessId"
                            class="role-management-menu-list-item">
                            <div style="width: 35%;text-align: center;">{{ item.businessId }}</div>
                            <div style="display: flex;width: 45%;">
                                <div>{{ item.businessName }}</div>
                                <div>（{{ item.businessNotes }}）</div>
                            </div>

                            <div style="display: flex;margin-right: 20px;">
                                <el-button type="danger" size="small"
                                    @click="deleteThisRoleMenu(item.businessId)">删除</el-button>
                            </div>
                        </div>
                        <template v-for="sonItem in roleMenuList">
                            <div v-if="sonItem.fatherBusinessId == item.businessId"
                                :key="sonItem.businessId + item.businessName" class="role-management-menu-list-sonItem">
                                <div style="width: 35%; text-align: center;">{{ sonItem.businessId }}</div>
                                <div style="display: flex;width: 45%; ">
                                    <div style="margin-left: 30px;">{{ sonItem.businessName }}</div>
                                    <div>（{{ sonItem.businessNotes }}）</div>
                                </div>
                                <div style="display: flex; margin-right: 20px;">
                                    <el-button type="danger" size="small"
                                        @click="deleteThisRoleMenu(sonItem.businessId)">删除</el-button>
                                </div>
                            </div>
                        </template>
                    </template>
                </div>

                <div style="background-color: #fff; width: 100%;">
                    <div class="role-management-title" style="margin-top: 10px;">
                        <div style="width: 100%;">添加菜单</div>
                        <el-select v-model="menuAddValue" multiple clearable collapse-tags style="margin-left: 20px;"
                            placeholder="请选择要添加的菜单">
                            <el-option v-for="item in menuAddOptions" :key="item.businessId"
                                :label="renderOptionLabel(item.businessName, item.businessNotes)" :value="item.businessId">
                            </el-option>
                        </el-select>
                        <el-button style="margin-left: 30px;" @click="submitAddMenu()" type="primary">确认添加</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.role-management-container {
    width: 95%;
    height: 97%;
    margin: 0 auto;
    margin-top: 1%;
    background-color: #fff;
    display: flex;
}

.role-management-left {
    width: 50%;
    height: 100%;
    background-color: #fff;
    border-right: #e8edf7 30px solid;
}

.role-management-title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    font-weight: 700;
    margin-top: 10%;
}

.role-management-right {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.role-management-menu-list {
    width: 100%;
    /* height: 100%; */
    margin: 0 auto;
    font-size: 14px;
    margin-top: 20px;
}

.role-management-menu-list-title {
    width: 100%;
    /* background-color: #fafafa; */
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    position: relative;
    margin-bottom: 10px;
}

.role-management-menu-list-item {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    display: flex;
    background-color: #fafafa;
    /* justify-content: space-between; */
    border-bottom: 1px solid #ebeef5;
}

.role-management-menu-list-item:hover {
    background-color: #f5f7fa;
}

.role-management-menu-list-sonItem {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    display: flex;
    background-color: #fff;
    /* justify-content: space-between; */
    border-bottom: 1px solid #ebeef5;
}

.role-management-menu-list-sonItem:hover {
    background-color: #f5f7fa;
}
</style>
<script>
import { getAllRoles, getRoleBusiness, getOtherMenus, addRoleMenu, addRole, deleteRole, deleteRoleMenu } from '../../api/user'
export default {
    name: 'RoleView',
    data() {
        return {
            roleList: [],
            roleForm: {
                roleName: null
            },
            rules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                ],
            },
            showRoleMenu: false,
            roleMenuList: [],
            roleSelect: null,
            menuAddOptions: [],
            menuAddValue: [],
            menuAdd: [],
        }
    },
    methods: {
        checkRoleMenu(row) {
            // console.log(row.roleName);
            this.roleSelect = row.roleName;
            this.showRoleMenu = true;
            getRoleBusiness(row.roleName).then(res => {
                this.roleMenuList = res.data.data;
                // console.log(this.roleMenuList);
            })
            getOtherMenus(row.roleName).then(res => {
                this.menuAddOptions = res.data.data;
                console.log(this.menuAddOptions);
            })
        },
        renderOptionLabel(businessName, businessNotes) {
            return businessName + "（" + businessNotes + "）";
        },
        submitAddMenu() {
            for (let i = 0; i < this.menuAddValue.length; i++) {
                let newItem = {
                    userRole: this.roleSelect,
                    businessId: this.menuAddValue[i]
                };
                this.menuAdd.push(newItem)
            }
            if (this.menuAdd.length != 0) {
                this.$confirm('此操作将为该角色添加选中的菜单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    addRoleMenu(this.menuAdd).then(res => {
                        if (res.data.code == '0') {
                            this.$message({
                                message: res.data.msg,
                                duration: 2000,
                                showClose: true,
                                type: 'success'
                            });
                            setTimeout(() => {
                                location.reload();
                            }, 700)
                        }
                        else {
                            this.$message.error(res.data.msg);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }
            else {
                this.$message.error("所选项不能为空");
            }
        },
        submitAddRole(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('此操作将新增该角色, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        addRole(this.roleForm.roleName).then(res => {
                            if (res.data.code == '0') {
                                this.$message({
                                    message: '新增成功',
                                    duration: 2000,
                                    showClose: true,
                                    type: 'success'
                                });
                                setTimeout(() => {
                                    location.reload();
                                }, 700)
                            }
                            else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
                else {
                    return false;
                }
            })
        },
        deleteThisRole(row) {
            this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteRole(row.roleName).then(res => {
                    if (res.data.code == '0') {
                        this.$message({
                            message: res.data.msg,
                            duration: 2000,
                            showClose: true,
                            type: 'success'
                        });
                        setTimeout(() => {
                            location.reload();
                        }, 700)
                    }
                    else {
                        this.$message.error(res.data.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        deleteThisRoleMenu(businessId) {
            this.$confirm('此操作将删除该角色的该菜单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteRoleMenu(this.roleSelect, businessId).then(res => {
                    if (res.data.code == '0') {
                        this.$message({
                            message: res.data.msg,
                            duration: 2000,
                            showClose: true,
                            type: 'success'
                        });
                        setTimeout(() => {
                            location.reload();
                        }, 700)
                    }
                    else {
                        this.$message.error(res.data.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }
    },
    mounted() {
        getAllRoles().then(res => {
            this.roleList = res.data.data
        })
    },
}
</script>